﻿@model MvcCmsProjectTracker.ViewModels.BugEditViewModel
@{
    var originatingTicketExists = Model.Bug.OriginatingTickets.Count() > 0;
}           
@section HtmlHead{
    <link href="@Url.Content("/content/ckeditor.css") rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function ClearCommentText() {
            $('#comment').val("");
        }
    </script>
}
<h2>
    Issue:@Model.Bug.BugID
</h2>
<div style="position: relative;">
    <form id="form1" action="" method="post">
    <div id="actionbuttons" style="width: 800px; text-align: right;">
        <p>
            <button onclick="SubmitForm();">
                Save</button>
            @Html.ActionLink("Delete", "Delete", new { id = Model.Bug.BugID }, new { @class = "button" })
            <a href="/projecttracker/Project/@Model.ActiveProjectID/Bug/Index" class="button">Back To List</a>  
            @if (originatingTicketExists)
            {
                <a href="/projecttracker/Project/@Model.ActiveProjectID/Ticket/Edit/@Model.Bug.OriginatingTickets.FirstOrDefault().TicketID">Originating Ticket</a>
            }          
        </p>
    </div>
    <hr />
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Bug.Title):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.TextBox("Title", Model.Bug.Title, new { style = "width:650px" })
    </div>
    <div class="clear">
    </div>
    <div class="editor-label" style="float: left; width: 150px">
        @Html.Label("Category"):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.DropDownList("CategoryID", new SelectList(Model.ProjectCategories, "CategoryID", "Name", Model.Bug.CategoryID), new { style = "width:200px" })
    </div>
    <div class="clear">
    </div>
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Bug.LastUpdate):
    </div>
    <div class="editor-field" style="float: left;">
        @String.Format("{0:g}", Model.Bug.LastUpdate)
    </div>
    <div class="clear">
    </div>
    <hr />
    <div style="float: left; width: 430px">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("AssignedTo"):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("AssignedUserID", new SelectList(Model.ProjectMembers, "User.UserID", "User.UserName", Model.Bug.AssignedTo.UserID), new { style = "width:200px" })
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Creator"):
        </div>
        <div class="editor-field" style="float: left;">
            @Model.Bug.CreatorUserName
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Bug.DateCreated):
        </div>
        <div class="editor-field" style="float: left;">
            @String.Format("{0:g}", Model.Bug.DateCreated)
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            Project:
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("ProjectID", new SelectList(Model.AvailableProjects, "ProjectID", "Name", Model.Bug.ProjectID), new { style = "width:200px" })
        </div>
        <div class="clear">
        </div>
    </div>
    <div style="float: left">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Status"):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("StatusID", new SelectList(Model.ProjectStatuses, "StatusID", "Name", Model.Bug.StatusID), new { style = "width:200px" })
            @if (Model.Bug.StatusID != null)
            {
                var statusExists = Model.ProjectStatuses.SingleOrDefault(s => s.StatusID == Model.Bug.StatusID);
                if (statusExists != null)
                {
                <img id="statusurl" src="@Url.Content(statusExists.ImageUrl)" alt="" />
                }
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Priority"):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("PriorityID", new SelectList(Model.ProjectPriorities, "PriorityID", "Name", Model.Bug.PriorityID), new { style = "width:200px" })
            @if (Model.Bug.PriorityID != null)
            {
                var priorityExists = Model.ProjectPriorities.SingleOrDefault(p => p.PriorityID == Model.Bug.PriorityID);
                if (priorityExists != null)
                {                
                <img id="priorityurl" src="@Url.Content(priorityExists.ImageUrl)" alt="" />
                }
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Milestone"):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("MilestoneID", new SelectList(Model.ProjectMilestones, "MilestoneID", "Name", Model.Bug.MilestoneID), new { style = "width:200px" })
            @if (Model.Bug.MilestoneID != null)
            {
                var mileStoneExists = Model.ProjectMilestones.SingleOrDefault(m => m.MilestoneID == Model.Bug.MilestoneID);
                if (mileStoneExists != null)
                {                    
                <img id="milestoneurl" src="@Url.Content(mileStoneExists.ImageUrl)" alt="" />
                }
            }
        </div>
        <div class="clear">
        </div>
        @if (Model.Bug.ParentBug != null)
        { 
            <div class="editor-label" style="float: left; width: 150px">
                Parent bug:
            </div>
            <div class="editor-field" style="float: left;">
                #@Html.ActionLink(Model.Bug.ParentBugID.ToString(), "Edit", new
            {
                id = Model.Bug.ParentBugID
            }): @Model.Bug.ParentBug.Title
            </div> 
            <div class="clear">
            </div>
        }
    </div>
    <div class="clear">
    </div>
    <br />
    @Html.Hidden("Description", "")
    </form>
</div>
<div class="tab-container">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Description</a></li>
            <li><a href="#tabs-2">Comments</a></li>
            <li><a href="#tabs-3">Attachments</a></li>
            <li><a href="#tabs-4">History</a></li>
            <li><a href="#tabs-5">Notification</a></li>
            <li><a href="#related">Related bugs</a></li>
        </ul>
        <div id="tabs-1">
            @Html.TextArea("Description_Editor", Model.Bug.Description)
        </div>
        <div id="tabs-2">
            @Html.Partial("BugComments", Model.BugCommentViewModel)
            @using (Ajax.BeginForm("AddComment", "Bug", new { id = Model.Bug.BugID }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "comments", OnFailure = "handleFailure", OnSuccess = "ClearCommentText" }))
            { 
                <b>
                    <label for="name">
                        Comment</label></b><br />
                @Html.TextArea("comment", "", 5, 80, null)<br />
                <br />
                <input type="submit" value="Submit" />
            }
        </div>
        <div id="tabs-3">
            @Html.Partial("BugAttachments", Model.BugAttachmentViewModel)
        </div>
        <div id="tabs-4">
            @Html.Partial("BugHistory", Model.BugHistoryViewModel)
        </div>
        <div id="tabs-5">
            @Html.Partial("BugNotifications", Model.BugNotificationViewModel)
        </div>
        <div id="related">
            @Html.Partial("BugRelated", Model.Bug)
        </div>
    </div>
</div>
<br />
@section ScriptContent{
    <script src="@Url.Content("/scripts/MvcCmsImageManager.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/areas/mvccmsprojecttracker/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Title: { required: true }
            },
            messages: {
                Title: "A Bug Title Is Required"
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 802);
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Title":
                        error.css('top', 60);
                        break;
                }
            }
        });
    </script>
    <script id="DocumentReady" type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            ChangeEnter();
//            $("#history").accordion({
//                collapsible: true,
//                active: false
//            });
        });        
    </script>
    <script id="InitEditor" type="text/javascript">
        var editor;
        function ChangeEnter() {
            if (editor) { editor.destroy(true); }
            editor = CKEDITOR.replace('Description_Editor',
		    {
		        enterMode: Number(1),
		        shiftEnterMode: Number(2),
		        height: "430"
		    });
            MvcCmsImages.SetupCKEditor(editor);
        }
        function SubmitForm() {
            $("#Description").val(editor.getData());
            $("#form1").submit();
        }
    </script>
    <script type="text/javascript" id="UpdateRelated">
        function UpdateRelated(ajaxContext) {
            $("#related").html(ajaxContext.responseText);
        }
    </script>
    <script type="text/javascript" id="ChangeImageDropdownChange">
        $('#Bug_MilestoneID').change(function () {
            var url = '/Project/GetMilestoneURL/' + $("#Bug_MilestoneID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#milestoneurl').attr("src", response);
                }
            });
        });

        $('#Bug_PriorityID').change(function () {
            var url = '/Project/GetPriorityURL/' + $("#Bug_PriorityID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#priorityurl').attr("src", response);
                }
            });
        });

        $('#Bug_StatusID').change(function () {
            var url = '/Project/GetStatusURL/' + $("#Bug_StatusID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#statusurl').attr("src", response);
                }
            });
        });
    </script>
}
